<ot-view>

    <div class="row" ng-hide="changeLog">
        <div class="col-md-12 alert alert-warning">
            <ot-loading>The change log is loading. This may take some time...</ot-loading>
        </div>
    </div>

    <div class="row" ng-show="changeLog">
        <div class="col-md-12">

            <!-- Main content -->
            <div class="row">
                <div class="col-md-12 ot-header-commands">
                    <button class="btn btn-default" ng-click="changeLogCommits()" ng-disabled="commitsLoading">
                        <ot-loading ng-if="commitsLoading"></ot-loading>
                        <span class="ot-header-command-unloaded" ng-hide="commits || commitsLoading"></span>
                        {{commitsCommand}}
                    </button>
                    <button ng-if="changeLog._issues" class="btn btn-default" ng-click="changeLogIssues()" ng-disabled="issuesLoading">
                        <ot-loading ng-if="issuesLoading"></ot-loading>
                        <span class="ot-header-command-unloaded" ng-hide="issues || issuesLoading"></span>
                        {{issuesCommand}}
                    </button>
                    <button class="btn btn-default" ng-click="changeLogFiles()" ng-disabled="filesLoading">
                        <span class="ot-header-command-unloaded" ng-hide="files"></span>
                        {{filesCommand}}
                    </button>
                    <b class="text-danger" ng-if="changeLog.syncError">
                        <span class="fa fa-warning"></span>
                        The Git repository could not be synchronised - this may result in inaccurate results.
                    </b>
                </div>
            </div>

            <!-- Build info -->

            <div class="row">
                <div class="col-md-6">
                    <a name="buildFrom"></a>
                    <ot-scm-changelog-build scm-build-view="changeLog.scmBuildFrom">
                        <div class="row">
                            <div class="col-md-12">
                                <h3>
                                    <small>Build info</small>
                                </h3>
                                <ul class="fa-ul">
                                    <li>
                                        <span class="fa fa-li fa-clock-o"></span>
                                        {{changeLog.scmBuildFrom.buildView.build.signature.time | date:'mediumDate' }}
                                        {{changeLog.scmBuildFrom.buildView.build.signature.time | date:'shortTime' }}
                                    </li>
                                    <li>
                                        <span class="fa fa-li fa-user"></span>
                                        {{changeLog.scmBuildFrom.buildView.build.signature.user.name}}
                                    </li>
                                    <li ng-if="changeLog.scmBuildFrom.buildView.build.description">
                                        <span class="fa fa-li fa-file-text-o"></span>
                                        {{changeLog.scmBuildFrom.buildView.build.description}}
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </ot-scm-changelog-build>
                </div>
                <div class="col-md-6">
                    <a id="buildTo"></a>
                    <ot-scm-changelog-build scm-build-view="changeLog.scmBuildTo">
                        <div class="row">
                            <div class="col-md-12">
                                <h3>
                                    <small>Build info</small>
                                </h3>
                                <ul class="fa-ul">
                                    <li>
                                        <span class="fa fa-li fa-clock-o"></span>
                                        {{changeLog.scmBuildTo.buildView.build.signature.time | date:'mediumDate' }}
                                        {{changeLog.scmBuildTo.buildView.build.signature.time | date:'shortTime' }}
                                    </li>
                                    <li>
                                        <span class="fa fa-li fa-user"></span>
                                        {{changeLog.scmBuildTo.buildView.build.signature.user.name}}
                                    </li>
                                    <li>
                                        <span class="fa fa-li fa-file-text-o"></span>
                                        {{changeLog.scmBuildTo.buildView.build.description}}
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </ot-scm-changelog-build>
                </div>
            </div>

            <!-- Commits sections -->
            <div class="row">
                <div class="col-md-12">
                    <a name="commits"></a>

                    <div class="panel panel-default">
                        <div class="panel-heading clearfix">
                            Commits
                            <div class="pull-right">
                                <a class="btn btn-default btn-xs" ng-if="changeLog._issues" ng-click="changeLogIssues()"
                                   ng-disabled="issuesLoading">
                                    <ot-loading ng-if="issuesLoading"></ot-loading>
                                    <span class="ot-header-command-unloaded" ng-hide="issues || issuesLoading"></span>
                                    {{issuesCommand}}
                                </a>
                                <a class="btn btn-default btn-xs" ng-click="changeLogFiles()"
                                   ng-disabled="filesLoading">
                                    <ot-loading ng-if="filesLoading"></ot-loading>
                                    <span class="ot-header-command-unloaded" ng-hide="files || filesLoading"></span>
                                    {{filesCommand}}
                                </a>
                            </div>
                        </div>
                        <div class="panel-body" ng-hide="commits">
                            <div class="alert alert-warning" ng-hide="commits || commitsLoading">
                                No commit has been loaded yet. Click
                                <a ng-click="changeLogCommits()" class="ot-action">here</a>
                                to load them.
                            </div>
                            <div class="ot-description" ng-show="commitsLoading">
                                <ot-loading>Commits are loading...</ot-loading>
                            </div>
                        </div>
                        <div class="panel-body ot-panel-padded" ng-if="commits">
                            <div class="pull-left">
                                <canvas git-plot="commits.log.plot"></canvas>
                            </div>
                            <div class="ot-graph-line"
                                 ng-repeat="gitUICommit in commits.log.commits">
                                <span class="ot-graph-code" ng-if="!gitUICommit.link">{{gitUICommit.commit.shortId}}</span>
                                <span class="ot-graph-code" ng-if="gitUICommit.link"><a href="{{gitUICommit.link}}" target="_blank">{{gitUICommit.commit.shortId}}</a></span>
                                <span class="ot-graph-message" ng-bind-html="gitUICommit.annotatedMessage"></span>
                                <span class="ot-graph-label">
                                    {{gitUICommit.commit.author.name}}
                                </span>
                                <span class="ot-graph-label">
                                    {{gitUICommit.commit.commitTime | date:'mediumDate'}}
                                    {{gitUICommit.commit.commitTime | date:'shortTime'}}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Issue sections -->
            <div class="row" ng-if="changeLog._issues">
                <div class="col-md-12">
                    <a name="issues"></a>

                    <div class="panel panel-default">
                        <div class="panel-heading clearfix">
                            Issues
                            <div class="pull-right">
                                <a class="btn btn-default btn-xs" ng-click="changeLogCommits()" ng-disabled="commitsLoading">
                                    <ot-loading ng-if="commitsLoading"></ot-loading>
                                    <span class="ot-header-command-unloaded" ng-hide="commits || commitsLoading"></span>
                                    {{commitsCommand}}
                                </a>
                                <a class="btn btn-default btn-xs" ng-click="changeLogFiles()" ng-disabled="filesLoading">
                                    <ot-loading ng-if="filesLoading"></ot-loading>
                                    <span class="ot-header-command-unloaded" ng-hide="files || filesLoading"></span>
                                    {{filesCommand}}
                                </a>
                                <a class="btn btn-default btn-xs" ng-click="changeLogExport()">
                                    <span class="fa fa-file-text-o"></span>
                                    Export
                                </a>
                            </div>
                        </div>
                        <div class="panel-body">
                            <div class="alert alert-warning" ng-hide="issues || issuesLoading">
                                No issue has been loaded yet. Click
                                <a ng-click="changeLogIssues()" class="ot-action">here</a>
                                to load them.
                            </div>
                            <div class="ot-description" ng-show="issuesLoading">
                                <ot-loading>Issues are loading...</ot-loading>
                            </div>
                            <div ng-show="issues">
                                <ot-include value="issues" template="extension/{{issues.issueServiceConfiguration.serviceId}}/changelog.issues.tpl.html">
                                </ot-include>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Files sections -->
            <div class="row">
                <div class="col-md-12">
                    <a name="files"></a>

                    <div class="panel panel-default">
                        <div class="panel-heading clearfix">
                            File changes
                            <div class="pull-right">
                                <a class="btn btn-default btn-xs" ng-click="changeLogCommits()" ng-disabled="commitsLoading">
                                    <ot-loading ng-if="commitsLoading"></ot-loading>
                                    <span class="ot-header-command-unloaded" ng-hide="commits || commitsLoading"></span>
                                    {{commitsCommand}}
                                </a>
                                <a class="btn btn-default btn-xs" ng-if="changeLog._issues" ng-click="changeLogIssues()" ng-disabled="issuesLoading">
                                    <ot-loading ng-if="issuesLoading"></ot-loading>
                                    <span class="ot-header-command-unloaded" ng-hide="issues || issuesLoading"></span>
                                    {{issuesCommand}}
                                </a>
                            </div>
                        </div>
                        <div class="panel-body" ng-hide="files || filesLoading">
                            <div class="alert alert-warning">
                                No file change has been loaded yet. Click
                                <a ng-click="changeLogFiles()" class="ot-action">here</a>
                                to load them.
                            </div>
                        </div>
                        <div class="panel-body ot-description" ng-show="filesLoading">
                            <ot-loading>File changes are loading...</ot-loading>
                        </div>
                        <div class="panel-body ot-panel-padded" ng-show="files">
                            <ot-extension-scm-changelog-filechangefilter change-log="changeLog" filter-callback="changeLogFileFilterConfig.callback"></ot-extension-scm-changelog-filechangefilter>
                        </div>
                        <div class="panel-body ot-panel-padded" ng-show="files">
                            <div class="ot-line-no-overflow ot-line-hover ot-line-border"
                                 ng-repeat="changeLogFile in files.list | filter:changeLogFileFilterConfig.filter">
                                <span class="ot-label-change ot-label-change-{{changeLogFile.changeType | lowercase}}">
                                    <span class="ot-label-change-icon" title="{{changeLogFile.changeType | lowercase}}"></span>
                                </span>
                                <a ng-if="changeLogFile.url" href="{{changeLogFile.url}}">{{changeLogFile.oldPath}}</a>
                                <span ng-if="!changeLogFile.url">{{changeLogFile.oldPath}}</span>
                                <span ng-if="changeLogFile.newPath">
                                    <span class="fa fa-arrow-right"></span>
                                    {{changeLogFile.newPath}}
                                </span>
                                <span ng-hide="changeLogFile.diffLoading || diffLoading" class="fa fa-download ot-command" title="Shows diff" ng-click="showFileDiff(changeLog, changeLogFile)"></span>
                                <span ng-show="changeLogFile.diffLoading" class="fa fa-spin fa-spinner ot-command" title="Diff is loading..."></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- End of sections -->

        </div>
    </div>

</ot-view>